<script lang="ts" setup name="SelectTeethModal">
import dDialog from '@/components/dDialog/dDialog.vue'
import dIcon from '@/components/dIcon.vue'
import {ref, watch} from 'vue'
const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  // 标题
  dialogTitle: {
    type: String,
    required: true
  },
  toothValue: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['close', 'switchTooth'])

// 默认牙齿数组
const toothValueArr = ref<Array<string>>(['0', '0', '0', '0', '0', '0', '0', '0'])

// 父组件牙齿数据
props.toothValue && (toothValueArr.value = props.toothValue.split(''))

// 牙齿选择状态
const selectAll = ref([''])

/**
 * @description: 点击牙齿
 * @param {*} index
 * @return {*}
 */
const switchTooth = (index: number) => {
  if (toothValueArr.value[index] === '1') {
    toothValueArr.value[index] = '0'
  } else {
    toothValueArr.value[index] = '1'
  }
}

/**
 * @description: 全选勾中
 * @param {*} val
 * @return {*}
 */
const handleCheckAllChange = (value) => {
  toothValueArr.value = value ? ['1', '1', '1', '1', '1', '1', '1', '1'] : ['0', '0', '0', '0', '0', '0', '0', '0']
}

//关闭
const onClose = () => {
  emits('close')
}

//取消按钮
const onCancel = () => {
  onClose()
}
// 确认按钮
const onConfirm = () => {
  emits('switchTooth', toothValueArr.value.join(''))
}

// 监听牙齿勾选
watch(
  () => toothValueArr.value,
  () => {
    if (toothValueArr.value.join('') === '11111111') {
      selectAll.value = ['全选']
    } else {
      selectAll.value = []
    }
  },
  {deep: true, immediate: true}
)
</script>
<template>
  <d-dialog :title="dialogTitle" :width="600" :show-dialog="showDialog" @cancel="onCancel" @confirm="onConfirm" @close="onClose">
    <div class="select-teeth-modal">
      <d-icon
        v-for="(item, index) in toothValueArr"
        :key="index"
        :icon-config="{icon: 'common-tooth', type: 'custom', color: item === '1' ? '#1C9399' : '#CCCCCC', size: 30}"
        @click="switchTooth(index)"
      />
    </div>
    <div class="d-common-flex-algin-just">
      <el-checkbox-group v-model="selectAll">
        <el-checkbox label="未选中牙齿" disabled class="not-select-teeth" />
        <el-checkbox label="已选中牙齿" disabled class="selected-teeth" />
        <el-checkbox label="全选" @change="handleCheckAllChange" />
      </el-checkbox-group>
    </div>
  </d-dialog>
</template>
<style lang="less" scoped>
.select-teeth-modal {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 30px 80px;
}
.not-select-teeth {
  :deep(.el-checkbox__inner) {
    background: #cccccc;
    border-color: #cccccc;
  }
}
.selected-teeth {
  :deep(.el-checkbox__inner) {
    background: #1c9399;
    border-color: #1c9399;
  }
}
</style>
